<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<style>
  .container1 {
    width: 100%;
    height: 100px;
    align-items: center;

    /*元素水平居中*/
    margin-top: 30px;
    margin-bottom: 30px;

  }

  .first {
    display: flex;
    flex-direction: row;
    text-align: left;
  }

  .name1 {
    font-size: 16px;
  }

  .name2 {
    font-size: 16px;
  }

  .name3 {
    font-size: 16px;
  }



  .button1 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .button2 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .button3 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .button4 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .container2 {
    width: 100%;
    height: 600px;
    align-items: center;

    /*边框*/
    /*元素水平居中*/
  }


  .block {
    text-align: center;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<body>

  <div id="app">
    <el-dialog title="修改员工" :visible.sync="alertUser" width="50%">
      <el-form :model="alertForm" :rules="rules" ref="alertForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="ID">
          <el-input v-model="alertForm.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="员工名">
          <el-input v-model="alertForm.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input maxlength="11" v-model="alertForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="所在地址">
          <el-input v-model="alertForm.address"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="info">
          <el-input v-model="alertForm.info"></el-input>
        </el-form-item>
        <el-form-item label="员工类型：">
          <el-select v-model="alertForm.groupid" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="alertForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="updateUser('alertForm')" type="primary" size="small">保存 </el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="员工名：">
        <el-input v-model="formInline.user" placeholder="员工名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchuser">查询</el-button>
      </el-form-item>
      <el-form-item label="员工类型：">
        <el-select v-model="formInline.groupid" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchuser2">查询</el-button>
        <el-button type="primary" @click="getall">全部</el-button>

      </el-form-item>
    </el-form>

    <div class="container2">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="员工列表" name="first">
          <el-table ref="multipleTable" border :data="filteuserList" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>

            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="info" label="简介" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="联系电话" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="groupid" label="类型" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.groupid == 1 ? "饲养员":""}}
                {{ scope.row.groupid == 2 ? "采购员":""}}
                {{ scope.row.groupid == 3 ? "疫苗员":""}}
                {{ scope.row.groupid == 4 ? "销售员":""}}

              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button @click.native.prevent="deleteRow(scope.$index, filteuserList)" type="text" size="small">
                  删除
                </el-button>
                <el-button type="text" size="small" @click.native.prevent="alertRow(scope.$index, filteuserList)">
                  修改信息
                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-tab-pane>
        <el-tab-pane label="创建员工" name="second">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-form-item label="头像">
              <el-upload class="avatar-uploader" action="/photo/upload" :show-file-list="false"
                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.imgurl" :src="ruleForm.imgurl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>


            <el-form-item label="员工名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input maxlength="11" v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="所在地址" prop="address">
              <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
            <el-form-item label="简介" prop="info">
              <el-input v-model="ruleForm.info"></el-input>
            </el-form-item>
            <el-form-item label="员工分类" prop="groupid">
              <el-select v-model="ruleForm.groupid" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="ruleForm.pass"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="createuser('ruleForm')" type="success" size="small">创建员工 </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      alertUser: false,
      alertForm: {
        id: 2,
        name: '',
        pass: '',
        phone: '',
        address: '',
        info: '',
        groupid: 1,
      },
      ruleForm: {
        name: '',
        pass: '',
        phone: '',
        address: '',
        info: '',
        groupid: "",
        imgurl: ""
      }, options: [{
        value: '1',
        label: '饲养员'
      }, {
        value: '2',
        label: '采购员'
      }, {
        value: '3',
        label: '疫苗员'
      }, {
        value: '4',
        label: '销售员'
      },],
      rules: {
        avatar: [
          { required: true, message: '请上传员工头像', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入员工登陆名', trigger: 'blur' },
          { min: 2, max: 11, message: '长度在 2 到 11 个字符', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入员工地址', trigger: 'blur' },
        ],
        pass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入正确电话号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位数字手机号码', trigger: 'blur' }
        ],
        info: [
          { required: true, message: '请输入员工信息', trigger: 'blur' },
        ],
        groupid: [
          { required: true, message: '请选择员工分类', trigger: 'blur' },
        ],
        pass: []
      },
      formInline: {
        user: '',
        groupid: ''
      },

      activeName: 'first',
      userList: [],
      filteuserList: [],
      multipleSelection: [],
      currentPage3: 5,
    },
    mounted() {
      this.getUser();
    },
    methods: {
      getall() {
        this.filteuserList = this.userList;
      },
      updateUser(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.post("/user/updateuser", this.alertForm).then(res => {
              console.log(res.data)
              if (res.data.result == "1001") {
                this.$notify.success({
                  title: '成功',
                  message: '修改员工信息成功'
                })
                this.getUser();
                return;
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      beforeAvatarUpload() {

      },
      handleAvatarSuccess(res, file) {
        console.log(res)
        this.ruleForm.imgurl = res;
      },
      createuser(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.post("/user/addUser", this.ruleForm).then(res => {
              console.log(res.data)
              if (res.data.result == "1001") {
                this.$notify.success({
                  title: '成功',
                  message: '创建员工成功'
                })
                this.getUser();
                return;
              } else {
                this.$notify.error({
                  title: '失败',
                  message: '创建员工失败'
                })
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      searchuser() {
        var newlist = []
        this.userList.forEach(ele => {
          if (ele.name == this.formInline.user) {
            newlist.push(ele)
          }
        })
        this.filteuserList = newlist;
      },
      searchuser2() {
        var newlist = []
        this.userList.forEach(ele => {
          if (ele.groupid == this.formInline.groupid) {
            newlist.push(ele)
          }
        })
        this.filteuserList = newlist;
      },
      getUser() {
        this.userList = []
        axios.post("/user/getAllUser").then(res => {
          console.log(res);
          if (res.data.result == "1001") {
            res.data.data.forEach(ele => {
              this.userList.push(ele)

            })
            this.filteuserList = this.userList
          }

          console.log(this.userList)
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleClick(tab, event) {

      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      deleteRow(index, rows) {
        axios.post("/user/delUser", { id: rows[index].id }).then(res => {
          console.log(res);
          if (res.data.result == "1001") {
            this.$notify.success({
              title: '删除成功',
              message: '删除员工成功！'
            })
            this.getUser();
          } else {
            this.$notify.error({
              title: '删除失败',
              message: '删除失败'
            })
          }
        })
      },
      alertRow(index, row) {
        this.alertUser = true;
        this.alertForm.id = row[index].id;
        this.alertForm.name = row[index].name;
        this.alertForm.phone = row[index].phone;
        this.alertForm.address = row[index].address;
        this.alertForm.info = row[index].info;
        this.alertForm.password = row[index].password;
        this.alertForm.groupid = row[index].groupid;

      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  })
</script>

</html>